<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>数据统计 - 网吧管理系统</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/materialdesignicons.min.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <aside class="lyear-layout-sidebar">
            <div id="logo" class="sidebar-header">
                <a href="index.jsp"><img src="images/logo-sidebar.png" alt="网吧管理系统" /></a>
            </div>
            <div class="lyear-layout-sidebar-scroll">
                <nav class="sidebar-main">
                    <ul class="nav nav-drawer">
                        <li class="nav-item"><a href="index.jsp"><i class="mdi mdi-home"></i> 后台首页</a></li>
                        <li class="nav-item"><a href="computer_management.jsp"><i class="mdi mdi-laptop"></i> 电脑管理</a></li>
                        <li class="nav-item"><a href="order_management.jsp"><i class="mdi mdi-cart"></i> 订单管理</a></li>
                        <li class="nav-item active"><a href="statistics.jsp"><i class="mdi mdi-chart-line"></i> 数据统计</a></li>
                        <li class="nav-item"><a href="account_management.jsp"><i class="mdi mdi-account"></i> 用户管理</a></li>
                    </ul>
                </nav>
            </div>
        </aside>

        <header class="lyear-layout-header">
            <nav class="navbar navbar-default">
                <div class="topbar">
                    <div class="topbar-left">
                        <div class="lyear-aside-toggler">
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                        </div>
                        <span class="navbar-page-title">数据统计</span>
                    </div>
                </div>
            </nav>
        </header>

        <main class="lyear-layout-content">
            <div class="container-fluid">
                <h2>网吧运营数据</h2>
                <div class="row">
                    <div class="col-md-6">
                        <h4>每日订单量</h4>
                        <canvas id="orderChart"></canvas>
                    </div>
                    <div class="col-md-6">
                        <h4>每日收入</h4>
                        <canvas id="revenueChart"></canvas>
                    </div>
                </div>

                <h3>用户统计</h3>
                <p>总用户数: 1200</p>
                <p>活跃用户数: 800</p>
                <p>新注册用户数 (本月): 150</p>

                <h3>电脑使用统计</h3>
                <p>总使用时长: 350小时</p>
                <p>高峰使用时段: 19:00 - 21:00</p>
            </div>
        </main>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.min.js"></script>

<script>
    // 示例数据，实际可以从后台动态加载
    var orderData = [12, 19, 3, 5, 2, 3, 13]; // 每日订单数量
    var revenueData = [500, 600, 200, 300, 150, 200, 700]; // 每日收入数据

    // 订单量图表
    var orderChartCtx = document.getElementById('orderChart').getContext('2d');
    var orderChart = new Chart(orderChartCtx, {
        type: 'line',
        data: {
            labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            datasets: [{
                label: '每日订单量',
                data: orderData,
                borderColor: 'rgba(75, 192, 192, 1)',
                fill: false
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // 收入图表
    var revenueChartCtx = document.getElementById('revenueChart').getContext('2d');
    var revenueChart = new Chart(revenueChartCtx, {
        type: 'bar',
        data: {
            labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            datasets: [{
                label: '每日收入 (元)',
                data: revenueData,
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>
</body>
</html>
